<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/telaPrincipal.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">


    <ui:define name="teste1JR">
        <h:form id="frmConsulta">
            <p:fieldset legend="Consultar Software">

                <br></br>
                
                <p:dataTable id="tblCadPessoa" emptyMessage="Não há registros" paginator="true" rows="5"  value="#{software.messages}" var="s" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                    <f:facet name="header">
                        Lista de Softwares
                    </f:facet>
                              
                    <p:column>
                        <p:commandButton value="Exibir" oncomplete="dlgSoftware.show()" update=":#{p:component('dialog')}" actionListener="#{softwareEx.exibir(s)}"/>                                                   
                    </p:column>
                    
                    <p:column>
                        <p:commandButton value="Editar" oncomplete="edtSoftware.show()" update=":#{p:component('dialog1')}" actionListener="#{softwareEx.exibir(s)}"/>                                                   
                    </p:column>
                              
                              
                    <p:column headerText="Id" filterBy="#{s.cid}">                    
                        <p:outputLabel value="#{s.cid}" />
                    </p:column>

                    <p:column headerText="Nome">                    
                        <p:outputLabel value="#{s.cnome}"/>
                    </p:column>

                    <p:column headerText="Desenvolvedor">                    
                        <p:outputLabel value="#{s.cdesenvolvedor}"/>
                    </p:column>

                    <p:column headerText="Data Criação">                    
                        <p:outputLabel value="#{s.cdatacriacao}"/>
                    </p:column>

                    <p:column headerText="Data Atualização">
                        <p:outputLabel value="#{s.cdataatualizacao}"/>  
                    </p:column>

                    <p:column headerText="Descrição">
                         <p:outputLabel value="#{s.cdescricao}"/>
                    </p:column>                    
                    
                    <p:column headerText="Manutenibilidade">                    
                        <p:outputLabel value="#{s.cmanutenibilidade}"/>
                    </p:column>
                    
                    <p:column headerText="Funcionalidade">                    
                        <p:outputLabel value="#{s.cfuncionalidade}"/>
                    </p:column>
                                        
                    <p:column headerText="Qualidade">                    
                        <p:outputLabel value="#{s.cqualidade}"/>
                    </p:column>
                             
                    <p:column headerText="Confiabilidade">                    
                        <p:outputLabel value="#{s.cconfiabilidade}"/>
                    </p:column>
                    
                    <p:column headerText="Eficiencia">                    
                        <p:outputLabel value="#{s.ceficiencia}"/>
                    </p:column>
                    
                    <p:column headerText="Portabilidade">                    
                        <p:outputLabel value="#{s.cportabilidade}"/>
                    </p:column>
                    
                    <p:column headerText="Usabilidade">                    
                        <p:outputLabel value="#{s.cusabilidade}"/>
                    </p:column>
                                              
                </p:dataTable>


            </p:fieldset>
            </h:form>
            
            <p:dialog id="dialog" header="Software" widgetVar="dlgSoftware" dynamic="true" draggable="false" resizable="false" maximizable="true">                  
         <h:form id = "frmDlgExibir">
         <p:tabView id="TabViewCadastro">
				<p:tab id="tabCadastro" title="Cadastro">
					<p:fieldset legend="Informações do Software">
						<h:panelGrid columns="2" cellpadding="2">
								
							<h:outputLabel value="Nome" for="txtNome" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtNome" size="50" disabled="true" value="#{softwareEx.soft.cnome}" />
	
							<h:outputLabel value="Desenvolvedor" for="txtDesenvolvedor" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDesenvolvedor" disabled="true" size="50" value="#{softwareEx.soft.cdesenvolvedor}" />						
	
							<h:outputLabel value="Descrição" for="txtDescricao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDescricao" size="50" disabled="true" value="#{softwareEx.soft.cdescricao}" />
							
							<h:outputLabel value="Data de Criação" for="txtDataCriacao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDataCriacao" size="10" disabled="true" value="#{softwareEx.soft.cdatacriacao}" />
							
							<h:outputLabel value="Data de Atualização" for="txtDataAtualizacao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDataAtualizacao" size="18" disabled="true" value="#{softwareEx.soft.cdataatualizacao}" />
						</h:panelGrid>
						
					</p:fieldset>
				</p:tab>
				
				<p:tab id="tabExiAvaliacao" title="Avaliação"><p:remoteCommand name="updateChart" actionListener="#{softwareEx.updateChart()}" oncomplete="updateChartData(xhr, status, args);" />
				
				<br></br>
				
				<p:fieldset legend="Avaliação do Software">
                     <center>
							<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/chartjs/Chart.min.js"></script>
	
							<canvas id="myChart" width="400" height="400"></canvas>
	
							<script>
								var myRadarChart;
								var ctx = document.getElementById('myChart').getContext('2d');
	
								var options = {
									//Boolean - Whether to show lines for each scale point
									scaleShowLine : true,
									//Boolean - Whether we show the angle lines out of the radar
									angleShowLineOut : true,
									//Boolean - Whether to show labels on the scale
									scaleShowLabels : false,
									// Boolean - Whether the scale should begin at zero
									scaleBeginAtZero : true,
									//String - Colour of the angle line
									angleLineColor : "rgba(0,0,0,.1)",
									//Number - Pixel width of the angle line
									angleLineWidth : 1,
									//String - Point label font declaration
									pointLabelFontFamily : "'Arial'",
									//String - Point label font weight
									pointLabelFontStyle : "normal",
									//Number - Point label font size in pixels
									pointLabelFontSize : 11,
									//String - Point label font colour
									pointLabelFontColor : "White",
									//Boolean - Whether to show a dot for each point
									pointDot : true,
									//Number - Radius of each point dot in pixels
									pointDotRadius : 3,
									//Number - Pixel width of point dot stroke
									pointDotStrokeWidth : 1,
									//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
									pointHitDetectionRadius : 20,
									//Boolean - Whether to show a stroke for datasets
									datasetStroke : true,
									//Number - Pixel width of dataset stroke
									datasetStrokeWidth : 2,
									//Boolean - Whether to fill the dataset with a colour
									datasetFill : true
								};
	
								function updateChartData(xhr, status, args) {
									var avaliacaoManutenibilidade = ((100 * args.avaliacaoManutenibilidade) / 5);
									var avaliacaoFuncionalidade = ((100 * args.avaliacaoFuncionalidade) / 5);
									var avaliacaoQualidade = ((100 * args.avaliacaoQualidade) / 5);
									var avaliacaoConfiabilidade = ((100 * args.avaliacaoConfiabilidade) / 5);
									var avaliacaoPortabilidade = ((100 * args.avaliacaoPortabilidade) / 5);
									var avaliacaoEficiencia = ((100 * args.avaliacaoEficiencia) / 5);
									var avaliacaoUsabilidade = ((100 * args.avaliacaoUsabilidade) / 5);
	
									console.log(avaliacaoManutenibilidade);
									console.log(avaliacaoFuncionalidade);
									console.log(avaliacaoQualidade);
									console.log(avaliacaoConfiabilidade);
									console.log(avaliacaoPortabilidade);
									console.log(avaliacaoEficiencia);
									console.log(avaliacaoUsabilidade);
	
									var data = {
										labels : [ "Manutenibilidade", "Funcionalidade", "Qualidade", "Confiabilidade", "Eficiência", "Portabilidade", "Usabilidade" ],
										datasets : [ {
											label : "The only dataset",
											fillColor : "rgba(151,187,205,0.2)",
											strokeColor : "rgba(151,187,205,1)",
											pointColor : "rgba(151,187,205,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [avaliacaoManutenibilidade, avaliacaoFuncionalidade, avaliacaoQualidade, avaliacaoConfiabilidade,
											        avaliacaoEficiencia, avaliacaoPortabilidade, avaliacaoUsabilidade]
										}]
									};
	
									myRadarChart = new Chart(ctx).Radar(data, options);
								}
								
								updateChart();
							</script>
						</center>	
			</p:fieldset>							
				</p:tab>
				
	
         </p:tabView>
       </h:form> 
      </p:dialog>
            
            <p:dialog id="dialog1" header="Editar Software" widgetVar="edtSoftware" dynamic="true" draggable="false" resizable="false" maximizable="true">
            <h:form id="frmTabCadastro">
            	
			<p:tabView id="TabViewCadastro">
				<p:tab id="tabCadastro" title="Cadastro">
					<p:fieldset legend="Informações do Software">
						<h:panelGrid columns="2" cellpadding="2">
								
							<h:outputLabel value="Nome" for="txtNome" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtNome" size="50" value="#{softwareEx.soft.cnome}" />
	
							<h:outputLabel value="Desenvolvedor" for="txtDesenvolvedor" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDesenvolvedor" size="50" value="#{softwareEx.soft.cdesenvolvedor}" />						
	
							<h:outputLabel value="Descrição" for="txtDescricao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDescricao" size="50" value="#{softwareEx.soft.cdescricao}" />
						</h:panelGrid>
						
						
					</p:fieldset>
				</p:tab>
				
				<p:tab id="tabAvaliacao" title="Avaliação">
					<p:remoteCommand name="updateChart" actionListener="#{softwareEx.updateChart()}" oncomplete="updateChartData(xhr, status, args);" />
					<center>
						<h:panelGrid columns="3">
						
							<p:fieldset legend="Manutenibilidade">
								<p:selectOneRadio id="radioManutenibilidade" value="#{softwareEx.soft.cmanutenibilidade}">
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							
							<p:fieldset legend="Funcionalidade">
								<p:selectOneRadio id="radioFuncionalidade" value="#{softwareEx.soft.cfuncionalidade}">
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							
							<p:fieldset legend="Qualidade">
								<p:selectOneRadio id="radioQualidade" value="#{softwareEx.soft.cqualidade}">
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							</h:panelGrid>
							</center>
							
							<center>
							<h:panelGrid columns="4">
							<p:fieldset legend="Confiabilidade">
								<p:selectOneRadio id="radioConfiabilidade" value="#{softwareEx.soft.cconfiabilidade}">
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							
							<p:fieldset legend="Portabilidade">
								<p:selectOneRadio id="radioPortabilidade" value="#{softwareEx.soft.cportabilidade}">
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							
							<p:fieldset legend="Eficiência">
								<p:selectOneRadio id="radioEficiência" value="#{softwareEx.soft.ceficiencia}">
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
						
						
							<p:fieldset legend="Usabilidade">
								<p:selectOneRadio id="radioUsabilidade" value="#{softwareEx.soft.cusabilidade}">
									<f:selectItem itemLabel="1" itemValue="1" />
									<f:selectItem itemLabel="2" itemValue="2" />
									<f:selectItem itemLabel="3" itemValue="3" />
									<f:selectItem itemLabel="4" itemValue="4" />
									<f:selectItem itemLabel="5" itemValue="5" />
	
									<p:ajax onstart="updateChart()" event="valueChange" />
								</p:selectOneRadio>
							</p:fieldset>
							</h:panelGrid>
							</center>
							
						<center>	
							<p:commandButton action="#{softwareEx.alterar}" value="Editar" update=":#{p:component('tblCadPessoa')}" oncomplete="editSoftware.show()" icon="ui-icon-disk" />
						</center>
						
						
						<p:dialog id="dialog" header="Software" widgetVar="editSoftware" dynamic="true" draggable="false" resizable="false" width="350px" height="50px">
						
						<h:outputLabel value="Dados Editados com Suicesso" style="font-family: Arial;font-weight: bold; font-size: 18px" />
						
						</p:dialog>
						
						<center>
							<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/chartjs/Chart.min.js"></script>
	
							<canvas id="myChart1" width="400" height="400"></canvas>
	
							<script>
								var myRadarChart;
								var ctx = document.getElementById('myChart1').getContext('2d');
	
								var options = {
									//Boolean - Whether to show lines for each scale point
									scaleShowLine : true,
									//Boolean - Whether we show the angle lines out of the radar
									angleShowLineOut : true,
									//Boolean - Whether to show labels on the scale
									scaleShowLabels : false,
									// Boolean - Whether the scale should begin at zero
									scaleBeginAtZero : true,
									//String - Colour of the angle line
									angleLineColor : "rgba(0,0,0,.1)",
									//Number - Pixel width of the angle line
									angleLineWidth : 1,
									//String - Point label font declaration
									pointLabelFontFamily : "'Arial'",
									//String - Point label font weight
									pointLabelFontStyle : "normal",
									//Number - Point label font size in pixels
									pointLabelFontSize : 11,
									//String - Point label font colour
									pointLabelFontColor : "White",
									//Boolean - Whether to show a dot for each point
									pointDot : true,
									//Number - Radius of each point dot in pixels
									pointDotRadius : 3,
									//Number - Pixel width of point dot stroke
									pointDotStrokeWidth : 1,
									//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
									pointHitDetectionRadius : 20,
									//Boolean - Whether to show a stroke for datasets
									datasetStroke : true,
									//Number - Pixel width of dataset stroke
									datasetStrokeWidth : 2,
									//Boolean - Whether to fill the dataset with a colour
									datasetFill : true
								};
	
								function updateChartData(xhr, status, args) {
									var avaliacaoManutenibilidade = ((100 * args.avaliacaoManutenibilidade) / 5);
									var avaliacaoFuncionalidade = ((100 * args.avaliacaoFuncionalidade) / 5);
									var avaliacaoQualidade = ((100 * args.avaliacaoQualidade) / 5);
									var avaliacaoConfiabilidade = ((100 * args.avaliacaoConfiabilidade) / 5);
									var avaliacaoPortabilidade = ((100 * args.avaliacaoPortabilidade) / 5);
									var avaliacaoEficiencia = ((100 * args.avaliacaoEficiencia) / 5);
									var avaliacaoUsabilidade = ((100 * args.avaliacaoUsabilidade) / 5);
	
									console.log(avaliacaoManutenibilidade);
									console.log(avaliacaoFuncionalidade);
									console.log(avaliacaoQualidade);
									console.log(avaliacaoConfiabilidade);
									console.log(avaliacaoPortabilidade);
									console.log(avaliacaoEficiencia);
									console.log(avaliacaoUsabilidade);
	
									var data = {
										labels : [ "Manutenibilidade", "Funcionalidade", "Qualidade", "Confiabilidade", "Eficiência", "Portabilidade", "Usabilidade" ],
										datasets : [ {
											label : "The only dataset",
											fillColor : "rgba(151,187,205,0.2)",
											strokeColor : "rgba(151,187,205,1)",
											pointColor : "rgba(151,187,205,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [avaliacaoManutenibilidade, avaliacaoFuncionalidade, avaliacaoQualidade, avaliacaoConfiabilidade,
											        avaliacaoEficiencia, avaliacaoPortabilidade, avaliacaoUsabilidade]
										}]
									};
	
									myRadarChart = new Chart(ctx).Radar(data, options);
								}
								
								updateChart();
							</script>
						</center>
					
				</p:tab>
			</p:tabView>
		</h:form>
	
            </p:dialog>
                        
    </ui:define>
</ui:composition> 



